<template>
  <div>
    <div class="header">
      <input
        class="input"
        v-model="content"
        type="text"
        placeholder="输入城市名或拼音"
      />
    </div>
    <div
      class="search_content"
      ref="content"
      v-show="content"
    >
      <ul>
        <li
          class="content_li"
          v-for="(item,index) of list"
          :key="index"
          @click='changeCity(item)'
        >{{item}}</li>
        <li
          class="content_li"
          v-show="hasnoData"
        >没有找到匹配数据</li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapMutations } from 'vuex'
export default {
  name: "CitySearch",
  props: {
    city: Array
  },
  data() {
    return {
      content: "",
      list: [],
      timer: null
    };
  },
  computed: {
    hasnoData() {
      return !this.list.length
    }
  },
  methods: {
    changeCity(city) {
      this.changeCity(city)
      this.$router.push("/")
    },
    ...mapMutations(["changeCity"])
  },
  watch: {
    content() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      if (!this.content) {
        this.list = []
        return
      }
      this.timer = setTimeout(() => {
        this.list = []
        for (let i in this.city) {
          this.city[i].lists.forEach(value => {
            if (value.indexOf(this.content) > -1) {
              this.list.push(value)
            }
          })
        }
      }, 100)
    }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.content)
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/variavle.styl'
ul 
  margin 0
  padding 0
ul li 
  list-style none
.header 
  background $bgColor
  height 0.72rem
  line-height 0.72rem
  padding 0 0.1rem
  font-size 0.2rem
  .input 
    box-sizing border-box
    width 100%
    height 0.62rem
    line-height 0.62rem
    text-align center
    border-radius 0.06rem
    color #666
    padding 0 0.1rem
.search_content 
  z-index 1
  position absolute
  top 1.38rem
  background #FFF
  left 0
  right 0
  bottom 0
  font-size 0.25rem
  overflow hidden
  .content_li 
    line-height 0.65rem
    text-indent 0.25rem
    border-bottom 0.02rem solid #ccc
</style>
